<!-- 省市区 -->
<script lang="ts" setup name="XtxCity">
  
  import { ref, watch } from 'vue'
  import { onClickOutside } from '@vueuse/core'
  import { AreaList, CityResult } from '@/types/data'
  import axios from 'axios'
  
  const emit = defineEmits<{(e: 'changeCity', value: CityResult): void}>()
  
  const cacheList = ref<AreaList[]>([])
  
  const active = ref(false)
  const toggle = () => {
    active.value = !active.value
  }
  
  const target = ref(null)
  
  // 在目标区域之外点击，关闭可视区域
  onClickOutside(target, () => {
    active.value = false
  })
  
  const cityList = ref<AreaList[]>([])
  const getCityList = async () => {
    const res = await axios.get<AreaList[]>(
      'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
    )
    cityList.value = res.data
    cacheList.value = res.data
  }
  getCityList()
  
  // 选择城市
  const changeResult = ref({
    provinceCode: '', // 省份编码
    provinceName: '', // 省份名字
    cityCode: '',
    cityName: '',
    countyCode: '',
    countyName: ''
  })
  
  const selectCity = (city: AreaList) => {
    if (city.level === 0) {
      // 省  在省这个级别点击
      changeResult.value.provinceName = city.name
      changeResult.value.provinceCode = city.code
      cityList.value = city.areaList
    }
    if (city.level === 1) {
      // 市  在市这个级别点击
      changeResult.value.cityName = city.name
      changeResult.value.cityCode = city.code
      cityList.value = city.areaList
    }
    if (city.level === 2) {
      // 县（区） 在区这个级别点击
      changeResult.value.countyName = city.name
      changeResult.value.countyCode = city.code
      // 关闭弹窗
      active.value = false
      
      // 子传父 把当前用户的选择数据抛出去
      emit('changeCity', changeResult.value)
    }
  }
  
  // 监听关闭弹窗的处理，恢复数据
  watch(active, (value) => {
    // 当关闭active的时候，需要恢复数据
    if (!value) {
      cityList.value = cacheList.value
    }
  })
  
  defineProps<{
    userAddress?: string
  }>()
  
</script>
<template>
<div class="xtx-city" ref="target">
  <div class="select" @click="toggle" :class="{ active: active }">
    <span class="value" v-if="userAddress">{{ userAddress }}</span>
    <span class="placeholder" v-else>请选择配送地址</span>
    <span class="value"></span>
    <i class="iconfont icon-angle-down"></i>
  </div>
  <div class="option" v-show="active">
    <span class="ellipsis" @click="selectCity(item)" v-for="item in cityList" :key="item.code">
      {{ item.name }}
  </span>
  </div>
  </div>
</template>

<style scoped lang="less">
  .xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;
    .select {
      border: 1px solid #e4e4e4;
      height: 30px;
      padding: 0 5px;
      line-height: 28px;
      cursor: pointer;
      &.active {
        background: #fff;
      }
      .placeholder {
        color: #999;
      }
      .value {
        color: #666;
        font-size: 12px;
      }
      i {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .option {
      width: 542px;
      border: 1px solid #e4e4e4;
      position: absolute;
      left: 0;
      top: 29px;
      background: #fff;
      min-height: 30px;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      > span {
        width: 130px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 3px;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
</style>
